import React, { useState, useEffect, useMemo } from 'react'
import { NavBar } from 'react-vant';
import { useNavigate } from "react-router-dom"
import { useDispatch,useSelector } from "react-redux"
import { changeTxt5 } from "../../store/modules/HcySlice1"
import "./myscss/Ceck4.scss"
export default function Ceck4() {
    const dispatch = useDispatch()
    const navigate = useNavigate()
    let {txt5} = useSelector(state => state.HcySlice)
    let [text, setText] = useState(txt5 || "")
    let newnum = useMemo(() => {
        return 140 - text.length
    }, [text])
    return (
        <div id='ceck4'>
            <div className='top1'>
                <NavBar
                    leftText="擅长"
                    onClickLeft={() => navigate('/ysrz/page1')}
                />
            </div>
            <div className='main'>
                <textarea value={text} onChange={(e) => { setText(e.target.value) }} placeholder='请输入擅长领域。示例:擅长儿童及青少年脊柱侧弯，脊柱侧凸，脊柱肿瘤以及瘤样病变，脊柱外伤，脊柱损伤，颈椎畸形等。'></textarea>
                <p className='txt'>还可在输入<span>{newnum}</span>个字</p>
            </div>
            <div className='bottom'>
                <button onClick={() => {dispatch(changeTxt5(text)); navigate("/ysrz/page1") }}>保存</button>
            </div>
        </div>
    )
}
